<template>
	<div class="zh-mobile-email">
		<nav-header></nav-header>
		<div class="zh-mobile-email-content">

			<div style="margin: 0 0 18px;">手机短信设置 (服务器必须联网情况下才能开启)</div>
			<div class="zh-mobile-email-form" 
				v-loading="phoneLoading1"
			>	
				<el-form :model="phoneForm1" :rules="rules" ref="phoneForm1" status-icon label-position="top">
					<el-form-item label="登录验证码" prop="flag">
					    <el-radio-group v-model="phoneForm1.flag">
					      <el-radio label="1">开启</el-radio>
					      <el-radio label="2">关闭</el-radio>
					    </el-radio-group>
					</el-form-item>
					<el-form-item label="http_url" prop="http_url">
					    <el-input v-model="phoneForm1.http_url" placeholder="请输入服务商地址" clearable></el-input>
					</el-form-item>
					<el-form-item label="cpcode" prop="cpcode">
					    <el-input v-model="phoneForm1.cpcode" placeholder="请输入服务商编码" clearable></el-input>
					</el-form-item>
					<el-form-item label="templetid" prop="templetid">
					    <el-input v-model="phoneForm1.templetid" placeholder="请输入模板ID" clearable></el-input>
					</el-form-item>
					<el-form-item label="AccessKey" prop="AccessKey">
					    <el-input v-model="phoneForm1.AccessKey" placeholder="请输入AccessKey" clearable></el-input>
					</el-form-item>
					<el-form-item>
						<el-button style="minWidth: 80px" size="medium" type="primary" @click.stop="savePhone(1)">保存</el-button>
					</el-form-item>
				</el-form>
			</div>

			<div style="margin: 38px 0 18px;">
				<!-- 手机短信设置 (服务器必须联网情况下才能开启) -->
			</div>
			<div class="zh-mobile-email-form" v-loading="phoneLoading2">	
				<el-form :model="phoneForm2" :rules="rules" ref="phoneForm2" status-icon label-position="top">
					<el-form-item label="注册账号通过" prop="flag">
					    <el-radio-group v-model="phoneForm2.flag">
					      <el-radio label="1">开启</el-radio>
					      <el-radio label="2">关闭</el-radio>
					    </el-radio-group>
					</el-form-item>
					<el-form-item label="http_url" prop="http_url">
					    <el-input v-model="phoneForm2.http_url" placeholder="请输入服务商地址" clearable></el-input>
					</el-form-item>
					<el-form-item label="cpcode" prop="cpcode">
					    <el-input v-model="phoneForm2.cpcode" placeholder="请输入服务商编码" clearable></el-input>
					</el-form-item>
					<el-form-item label="templetid" prop="templetid">
					    <el-input v-model="phoneForm2.templetid" placeholder="请输入模板ID" clearable></el-input>
					</el-form-item>
					<el-form-item label="AccessKey" prop="AccessKey">
					    <el-input v-model="phoneForm2.AccessKey" placeholder="请输入AccessKey" clearable></el-input>
					</el-form-item>
					<el-form-item>
						<el-button style="minWidth: 80px" size="medium" type="primary" @click.stop="savePhone(2)">保存</el-button>
					</el-form-item>
				</el-form>
			</div>

            <div style="margin: 38px 0 18px;">
				<!-- 手机短信设置 (服务器必须联网情况下才能开启) -->
			</div>
			<div class="zh-mobile-email-form" v-loading="phoneLoading3">	
				<el-form :model="phoneForm3" :rules="rules" ref="phoneForm3" status-icon label-position="top">
					<el-form-item label="注册账号拒绝" prop="flag">
					    <el-radio-group v-model="phoneForm3.flag">
					      <el-radio label="1">开启</el-radio>
					      <el-radio label="2">关闭</el-radio>
					    </el-radio-group>
					</el-form-item>
					<el-form-item label="http_url" prop="http_url">
					    <el-input v-model="phoneForm3.http_url" placeholder="请输入服务商地址" clearable></el-input>
					</el-form-item>
					<el-form-item label="cpcode" prop="cpcode">
					    <el-input v-model="phoneForm3.cpcode" placeholder="请输入服务商编码" clearable></el-input>
					</el-form-item>
					<el-form-item label="templetid" prop="templetid">
					    <el-input v-model="phoneForm3.templetid" placeholder="请输入模板ID" clearable></el-input>
					</el-form-item>
					<el-form-item label="AccessKey" prop="AccessKey">
					    <el-input v-model="phoneForm3.AccessKey" placeholder="请输入AccessKey" clearable></el-input>
					</el-form-item>
					<el-form-item>
						<el-button style="minWidth: 80px" size="medium" type="primary" @click.stop="savePhone(3)">保存</el-button>
					</el-form-item>
				</el-form>
			</div>

			<div style="margin: 38px 0 18px;">邮箱设置 (服务器必须联网情况下才能开启)</div>
			<div class="zh-mobile-email-form"
				v-loading="loadingEmail.status"
				:element-loading-text="loadingEmail.txt"
			>
				<el-form :model="emailForm" :rules="rules" ref="emailForm" status-icon label-position="top">
					<el-form-item label="邮箱开关" prop="flag">
					    <el-radio-group v-model="emailForm.flag">
					      <el-radio label="1">开启</el-radio>
					      <el-radio label="2">关闭</el-radio>
					    </el-radio-group>
					</el-form-item>
					<el-form-item label="邮箱名" prop="mail_username">
					    <el-input v-model="emailForm.mail_username" placeholder="例如：lina@.163.com" clearable></el-input>
					</el-form-item>
					<el-form-item label="发件人地址" prop="mail_from">
					    <el-input v-model="emailForm.mail_from" placeholder="请输入发件人地址" clearable></el-input>
					</el-form-item>
					<el-form-item label="发件人姓名" prop="mail_fromname">
					    <el-input v-model="emailForm.mail_fromname" placeholder="请输入发件人姓名" clearable></el-input>
					</el-form-item>
					<el-form-item label="邮箱密码" prop="mail_password">
					    <el-input v-model="emailForm.mail_password" type="password" placeholder="请输入邮箱密码" clearable></el-input>
					</el-form-item>
					<el-form-item label="端口号" prop="mail_port">
					    <el-input v-model="emailForm.mail_port" placeholder="请输入端口号" clearable></el-input>
					</el-form-item>
					<el-form-item label="发送标题" prop="mail_title">
					    <el-input v-model="emailForm.mail_title" placeholder="请输入发送标题" clearable></el-input>
					</el-form-item>
					<el-form-item label="发送内容" prop="mail_content">
					    <el-input v-model="emailForm.mail_content" placeholder="请输入发送内容" clearable></el-input>
					</el-form-item>
					<div style="margin-bottom: 18px">
						发送内容为HTML格式,{code}是验证码随机标记.例如:"尊敬的用户您好，您的验证码是： {code} ,请勿泄漏"
					</div>
					<div style="margin-bottom: 38px">帐号申请地址: <a href="https://email.163.com/" target="_blank" style="color:#FF2F2F">163邮箱(网易旗下)</a></div>
					<el-form-item>
						<el-button style="minWidth: 80px" size="medium" type="primary" @click.stop="saveEmail">保存</el-button>
					</el-form-item>
				</el-form>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		data(){
			return {
				phoneLoading1:true,
				phoneLoading2:true,
				phoneLoading3:true,
				loadingEmail:{
					status:true,
					txt:'加载数据...'
				},
				phoneForm1: {
					type: 1,
					flag: '1',
					http_url: '',
					cpcode: '',
					templetid: '',
					AccessKey: '',
				},
				phoneForm2: {
					type: 2,
                    flag: '1',
					http_url: '',
					cpcode: '',
					templetid: '',
					AccessKey: '',
				},
                phoneForm3: {
					type: 3,
					flag: '1',
					http_url: '',
					cpcode: '',
					templetid: '',
					AccessKey: '',
				},
				emailForm: {
					flag: '1',
					mail_username: '',
					mail_from: '',
					mail_fromname: '',
					mail_password: '',
					mail_port: '',
					mail_title:'',
					mail_content:'',
				},
				rules: {
					http_url: [
			            { validator: this.validateName, trigger: 'blur', required: true },
		            ],
		            cpcode: [
			            { validator: this.validateName, trigger: 'blur', required: true },
		            ],
		            templetid: [
			            { validator: this.validateName, trigger: 'blur', required: true },
		            ],
		            AccessKey: [
			            { validator: this.validateName, trigger: 'blur', required: true },
		            ],
		            mail_username: [
			            { validator: this.validateEmaill, trigger: 'blur', required: true },
		            ],
		            // address: [
			        //     { validator: this.validateName, trigger: 'blur', required: true },
		            // ],
		            mail_from: [
			            { validator: this.validateName, trigger: 'blur', required: true },
		            ],
		            mail_fromname: [
			            { validator: this.validateName, trigger: 'blur', required: true },
		            ],
		            mail_password: [
			            { trigger: 'blur', required: false },
		            ],
		            mail_port: [
			            { validator: this.validateName, trigger: 'blur', required: true },
		            ],
		            mail_title: [
			            { validator: this.validateName, trigger: 'blur', required: true },
		            ],
		            mail_content: [
			            { validator: this.validateName, trigger: 'blur', required: true },
		            ],
				},
			}
		},
		created(){
			this.getPhoneConfig(1);
			this.getPhoneConfig(2);
			this.getPhoneConfig(3);
			this.getEmailConfig();
		},
		methods: {
			getPhoneConfig(type){
				let success = ( data=>{
            		this['phoneLoading'+type] = false;
            		this['phoneForm'+type].flag = data.data.flag.toString();
					this['phoneForm'+type].http_url = data.data.http_url
					this['phoneForm'+type].cpcode = data.data.cpcode
					this['phoneForm'+type].templetid = data.data.templetid
                    this['phoneForm'+type].AccessKey = data.data.AccessKey
            	})
            	let fail = ( data =>{
            		this['phoneLoading'+type] = false;
            		this.$message.error( data.msg );
            	})
            	this.$ajax.get('api/system/wosms_config',{params: {type},func:{success:success,fail:fail}})
			},
			savePhone(type){
				this.$refs['phoneForm'+type].validate((valid) => {
			        if (valid) {
			            let success = ( data => {
				    		this.$message.success(data.msg);
							this.getPhoneConfig(type);
						});
			    		this.$ajax.post('api/system/wosms_config', this['phoneForm'+type], {func:{success:success}})
			        } else {
			            return false;
			        }
			    });
			},
			getEmailConfig(){
				let success = ( data=>{
					this.loadingEmail.status = false;
            		this.emailForm.flag =  data.data.flag.toString()
					this.emailForm.mail_username =  data.data.MAIL_USERNAME
					this.emailForm.mail_from =  data.data.MAIL_FROM
					this.emailForm.mail_fromname =  data.data.MAIL_FROMNAME
					this.emailForm.mail_port =  data.data.MAIL_PORT
					this.emailForm.mail_title = data.data.MAIL_TITLE
					this.emailForm.mail_content = data.data.MAIL_CONTENT
            	})
            	let fail = ( data => {
            		this.loadingEmail.status = false;
            		this.$message.error( data.msg );
            	})
            	this.$ajax.get('api/system/email_config',{params: {},func:{success:success,fail:fail}})
			},
			saveEmail(){
				this.$refs.emailForm.validate((valid) => {
			        if (valid) {
			            let success = ( data => {
				    		this.$message.success(data.msg);
							this.getEmailConfig();
						});
			    		this.$ajax.post('api/system/email_config',this.emailForm,{func:{success:success}})
			        } else {
			            
			            return false;
			        }
			    });
			},
			validateName(rule, value, callback){
				if (value === '') {
					return callback(new Error('不能为空'))
				}else {
					callback()
				}
			},
			validateEmaill(rule, value, callback){
				if (value === '') {
					return callback(new Error('不能为空'))
				} else if ( !validateEmail(value)) {
					return callback(new Error('请输入正确格式的邮箱'))
				} else {
					callback()
				}
			},
			validatePorts(rule, value, callback){
				if (value === '') {
					return callback(new Error('不能为空'))
				} else if ( !validatePort(value)) {
					return callback(new Error('请输入数字'))
				} else {
					callback()
				}
			},
		}
	}
</script>
<style lang="scss">
	.zh-mobile-email {
		.zh-mobile-email-content {
			.zh-mobile-email-form {
				border-bottom: 1px solid #e6e6e6;
				.el-form-item__label {
					padding: 0;
				}
				.el-form-item__content {
					width: 360px;
				}
			}
			.save-button {
				width: 400px;
				text-align: center;
    			padding-bottom: 38px;
				button {
					min-width: 100px;
				}
			}
		}
	}
</style>